import React from 'react'
import Permission from 'components/template/permission'
import { Form, Button } from 'antd'
const FormItem = Form.Item;

export default {
  key: 'permission',
  name: 'Permission 人员权限',
  author: '张然',
  description: '选择人员分配权限需要的组件。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [{
        param: 'formItemLayout', description: '内部表单组件的布局。', type: 'object', defaultValue: '{ labelCol: { span: 8 }, wrapperCol: { span: 10, offset: 1 }}'
      }, {
        param: 'hidden', description: '需要隐藏的内部组件列表，有::ALL::、::PERSON_GROUP::、::DEPARTMENT::三种。', type: 'array', defaultValue: '[]'
      }, {
        param: 'component', description: '内部选择器需要显示的组件，有::Chooser::、::Searcher::两种。', type: 'object', defaultValue: '{ "PERSON_GROUP": "Chooser", "DEPARTMENT": "Chooser" }'
      }, {
        param: 'componentProps', description: '内部选择器需要的::props::。', type: 'object', defaultValue: '{ "PERSON_GROUP": {}", "DEPARTMENT": {}" }'
      }, {
        param: 'formatter', description: '指定传出数据的格式。', type: '({ range, value }}) => any', defaultValue: 'value => value'
      }, {
        param: 'parser', description: '指定传入数据的格式。', type: 'any => ({ range, value })', defaultValue: 'value => value'
      }, {
        param: 'onChange', description: '内部值变化时的回调。', type: '() => {}', defaultValue: '-'
      }, {
        param: 'value', description: '内部的值，经过parser后需要转换为::{ range, value }::形式。', type: 'any', defaultValue: '-'
      }, {
        param: 'disabled', description: '是否禁用。', type: 'bool', defaultValue: '-'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '',
      state: {
        annotateList: []
      },
      getMethod: context => {
        return {

        }
      },
      getContent: context => {
        return (
          <div>
            <Permission onChange={console.log}/>
          </div>
        )
      }
    },
    {
      title: '表单用法',
      description: '同时支持::formatter::与::parser::。',
      state: {
        annotateList: []
      },
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const { getFieldDecorator } = context.props.form;
        const visibleScopeMap = {
          'ALL': 1001,
          'PERSON_GROUP': 1002,
          'DEPARTMENT': 1003
        };
        return (
          <div>
            <Form onSubmit={context.handleSubmit}>
              <FormItem>
                {getFieldDecorator('permission')(
                  <Permission
                    formatter={result => ({
                      visibleScope: visibleScopeMap[result.range],
                      data: result.value
                    })}
                    parser={value => ({
                      range: Object.keys(visibleScopeMap).find(key => visibleScopeMap[key] === value.visibleScope),
                      value: value.data
                    })}
                  />
                )}
              </FormItem>
              <FormItem>
                <Button type="primary" htmlType="submit">提交</Button>
              </FormItem>
            </Form>
          </div>
        )
      }
    }
  ]
}
